<template>
    <view>
        <!-- <view v-if="drugData.showFlag == 2">
      <view class="content_bg">
        <view class="medical_img">
          <image style="width: 100%; height: 100%;" :src="drugData.img"></image>
        </view>
        <view class="medical_info">
          <view>
            <view class="main_info">
              <text>{{ drugData.name ? drugData.name : '' }}</text>
            </view>
            <view v-if="drugData.serviceTime" class="main_info">
              <text>
                服务时间：{{ drugData.serviceTime ? drugData.serviceTime : '' }}
              </text>
            </view>
            <view v-if="drugData.specifications" class="main_info">
              <text>
                规格{{ drugData.specifications ? drugData.specifications : '' }}
              </text>
            </view>
          </view>
          <view>
            <text class="price">
              ￥{{ drugData.price ? drugData.price : '' }}
            </text>
          </view>
        </view>
      </view>
      <view
        class="textContent"
        style="margin-top: 20rpx; padding-bottom: 200rpx;"
      >
        <rich-text :nodes="drugData.content"></rich-text>
      </view>
    </view> -->
        <view>
            <!--  v-if="drugData.showFlag == 1" -->
            <view class="content_bg">
                <view class="medical_img" style="position: relative">
                    <image
                        style="width: 100%; height: 100%"
                        :src="drugData.img"
                    ></image>
                    <text
                        style="position: relative; top: -20rpx; left: 325rpx"
                        class="gray_font"
                        >图片仅供参考，请以实物为准</text
                    >
                </view>
                <view class="medical_info">
                    <view>
                        <view class="main_info">
                            <text>{{
                                drugData.name ? drugData.name : ''
                            }}</text>
                        </view>
                        <view class="content_info gray_font">
                            <text>
                                规格：
                                {{
                                    drugData.specifications
                                        ? drugData.specifications
                                        : '暂无规格'
                                }}
                            </text>
                        </view>
                    </view>
                    <view>
                        <text class="price">
                            ￥{{ drugData.price ? drugData.price : '' }}
                        </text>
                    </view>
                </view>
            </view>
            <view
                class="content_bg"
                style="margin-top: 20rpx; padding-bottom: 190rpx"
            >
                <view>
                    <view class="medical_title">药品详情</view>
                </view>
                <view v-if="drugData.name">
                    <view class="drugname">【 药品名 】</view>
                    <view class="medical_data">{{ drugData.name }}</view>
                </view>
                <view v-if="drugData.commonName">
                    <view class="drugname">【 通用名 】</view>
                    <view class="medical_data">{{ drugData.commonName }}</view>
                </view>
                <view v-if="drugData.specifications">
                    <view class="drugname">【 规格 】</view>
                    <view class="medical_data">{{
                        drugData.specifications
                    }}</view>
                </view>
                <view v-if="drugData.dosageForm">
                    <view class="drugname">【 剂型 】</view>
                    <view class="medical_data">{{ drugData.dosageForm }}</view>
                </view>
                <view v-if="drugData.classType">
                    <view class="drugname">【 药品类型 】</view>
                    <view class="medical_data">{{
                        classType[drugData.classType] || '处方非处方'
                    }}</view>
                </view>
                <view v-if="drugData.defaultUsage">
                    <view class="drugname">【 用法用量 】</view>
                    <view class="medical_data">{{
                        drugData.defaultUsage
                    }}</view>
                </view>

                <view v-if="drugData.composition">
                    <view class="drugname">【 成分 】</view>
                    <view class="medical_data">{{ drugData.composition }}</view>
                </view>
                <view v-if="drugData.manufacturer">
                    <view class="drugname">【 生产企业 】</view>
                    <view class="medical_data">{{
                        drugData.manufacturer
                    }}</view>
                </view>
                <view v-if="drugData.approvalNumber">
                    <view class="drugname">【 批准文号 】</view>
                    <view class="medical_data">{{
                        drugData.approvalNumber
                    }}</view>
                </view>

                <view v-if="drugData.applicableSymptoms">
                    <view class="drugname">【 适应症状 】</view>
                    <view class="medical_data">{{
                        drugData.applicableSymptoms
                    }}</view>
                </view>
                <view v-if="drugData.adverseReactions">
                    <view class="drugname">【 不良反应 】</view>
                    <view class="medical_data">{{
                        drugData.adverseReactions
                    }}</view>
                </view>

                <view v-if="drugData.contraindications">
                    <view class="drugname">【 注意事项 】</view>
                    <view class="medical_data">{{
                        drugData.contraindications
                    }}</view>
                </view>
                <view v-if="drugData.taboo">
                    <view class="drugname">【 禁忌 】</view>
                    <view class="medical_data">{{ drugData.taboo }}</view>
                </view>
                <!-- <view v-if="drugData.Storage">
                <view class="drugname">【 贮藏 】</view>
                <view class="medical_data">{{ drugData.Storage }}</view>
            </view> -->

                <!-- <view v-if="drugData.validPeriod">
                <view class="drugname">【 有效期(月) 】</view>
                <view class="medical_data">{{ drugData.validPeriod }}</view>
            </view> -->

                <!-- <view v-if="drugData.instructions">
                <view class="drugname">【 用药说明 】</view>
                <view class="medical_data">{{ drugData.instructions }}</view>
            </view> -->
            </view>
        </view>

        <view class="example-body bottom-car">
            <uni-goods-nav
                :fill="true"
                :options="options"
                :button-group="buttonGroup"
                @click="onClick"
                @buttonClick="buttonClick"
            />
        </view>
        <uni-popup ref="popup">
            <view
                style="
                    padding: 20rpx;
                    background-color: #ffffff;
                    border-top-right-radius: 15rpx;
                    border-top-left-radius: 15rpx;
                "
            >
                <view class="icon_close">
                    <image
                        @click="closeXQ"
                        style="width: 50rpx; height: 50rpx; float: right"
                        src="../../../static/images/icon_close_gray.png"
                    ></image>
                </view>
                <view class="medicalinner_border">
                    <view class="medicalinner_img">
                        <image
                            style="width: 100%; height: 100%"
                            :src="drugData.img"
                        ></image>
                    </view>
                    <view style="margin-left: 25rpx">
                        <view
                            class="medicalName"
                            style="font-size: 33rpx; margin-top: 10rpx"
                        >
                            {{ drugData.name ? drugData.name : '' }}
                        </view>
                        <view class="price">
                            <view
                                class="gray_font"
                                style="font-size: 26rpx; margin-top: 7rpx"
                            >
                                <text>
                                    规格：{{
                                        drugData.specifications || '暂无规格'
                                    }}
                                </text>
                            </view>
                        </view>
                        <view class="medicalprice">
                            ￥{{ drugData.price ? drugData.price : '' }}
                        </view>
                    </view>
                </view>
                <view
                    style="
                        display: flex;
                        justify-content: space-between;
                        margin-top: 30rpx;
                    "
                >
                    <view
                        style="
                            line-height: 60rpx;
                            font-size: 33rpx;
                            color: #999999;
                        "
                    >
                        数量
                    </view>
                    <view>
                        <uni-number-box :min="1" @change="changecount" />
                    </view>
                </view>
                <button
                    v-if="btnsign == 1 && drugData.stock > 0"
                    @click="addCart"
                    class="btn_appointment arc_button"
                    type="default"
                >
                    加入购物车
                </button>
                <button
                    v-if="btnsign == 2 && drugData.stock > 0"
                    @click="purchase"
                    class="btn_appointment arc_button"
                    type="default"
                >
                    确定
                </button>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { cartAdd, prescriptionMsg, CartNum } from '@/api/order.js';
import store from '@/store';
export default {
    data() {
        return {
            classType: {
                1: '处方',
                2: '非处方',
            },
            medicalid: '',
            drugData: {},
            options: [
                {
                    icon: 'headphones',
                    text: '客服',
                },
                {
                    icon: 'cart',
                    text: '购物车',
                    info: 0,
                },
            ],
            buttonGroup: [
                {
                    text: '加入购物车',
                    backgroundColor: '#ffa200',
                    color: '#fff',
                },
                {
                    text: '立即购买',
                    backgroundColor: '#09C068',
                    color: '#fff',
                },
            ],
            Medicalcount: 1,
            btnsign: '',
            type: '',
        };
    },
    onShow() {
        this.getCartCount(); //预约单数量
    },
    onLoad: function (option) {
        this.medicalid = option.medicalid;
        this.type = option.type;
        // console.log("&&&&&type",this.type)
        this.getMsg(); //商品详情
    },

    onUnload() {
        this.$store.commit('SET_DRUG_DETAIL', true); //从详情页面返回时保存个标识存到缓存中

    },
    // //发送给朋友
    // onShareAppMessage(res) {
    //     console.log(res,'9999999')
    //     return {
    //             title: '这是标题',//this.goods.name,  
    //             path: `/pagesSub/homePage/prescribing/mallMessage`
    //         }
    // },
    methods: {
        //详情
        getMsg() {
            let _this = this;
            uni.showLoading({
                title: '加载中',
            });
            let storeId = store.state.app.storeId;
            prescriptionMsg(_this.medicalid, storeId)
                .then((res) => {
                    _this.drugData = res.data;
                    let data = res.data;
                    let content;
                    if (data && data.content) {
                        content = data.content.replace(
                            /\<img/g,
                            "< img style='width: 100%;'"
                        );
                    }
                    data.content = content;
                    _this.drugData = data;
                    uni.hideLoading();
                })
                .catch((res) => {
                    uni.hideLoading();
                });
        },
        // 获取预约单数量
        getCartCount() {
            let _this = this,
                storeId = store.state.app.storeId; //药店id

            CartNum(storeId)
                .then((res) => {
                    _this.options[1].info = res.data;
                })
                .catch((res) => {
                    console.log('err', res);
                });
        },
        onClick(e) {
            if (e.content.text == '客服') {
                uni.navigateTo({
                    url: `/pagesSub-My/my/customerService`,
                });
            }
            if (e.content.text == '购物车') {
                uni.navigateTo({
                    url: `/pagesSub/shopCar/index`,
                });
            }
            //  if (e.content.text == '分享') {
            //    onShareAppMessage()
            // }
        },
        //更改数量
        changecount(e) {
            this.Medicalcount = e;
        },
        //加入预约单 立即购买弹窗
        buttonClick(e) {
            if (e.content.text == '加入购物车') {
                this.btnsign = 1;
                this.$refs.popup.open('bottom');
            }
            if (e.content.text == '立即购买') {
                this.btnsign = 2;
                this.$refs.popup.open('bottom');
            }
        },
        //加入预约单
        addCart() {
            let _this = this;
            uni.showLoading({
                title: '加载中',
            });
            // console.log("数量++",_this.Medicalcount)
            cartAdd({
                productId: _this.medicalid,
                countNum: _this.Medicalcount, //数量
                type: 1, //1 添加数量，2 减少数量
                uid: store.state.app.uid,
                // doctorId: store.state.app.serviceUid, //医生id
                storeId: store.state.app.storeId, //药店id
            })
                .then((res) => {
                    if (res.code == 200) {
                        this.getCartCount();
                        this.$refs.popup.close();
                        uni.showToast({
                            title: '添加成功',
                            icon: 'none',
                            duration: 3000,
                        });
                        uni.hideLoading();
                    }
                })
                .catch((err) => {
                    uni.hideLoading();
                    uni.showToast({
                        title: err,
                        icon: 'none',
                        duration: 3000,
                    });
                });
        },
        closeXQ() {
            this.$refs.popup.close();
        },
        //立即购买
        purchase() {
            let medicals = [
                {
                    id: this.medicalid,
                    count: this.Medicalcount,
                    name: this.drugData.name,
                    specification: this.drugData.specifications,
                    img: this.drugData.img,
                    price: this.drugData.price,
                    drugChannel: this.drugData.drugChannel,
                    medicalItemCode: this.drugData.medicalItemCode, //医疗项目编码（东营和油田）
                    medicalItemCode2: this.drugData.medicalItemCode2,  //医疗项目编码
                    medicalFlag: this.drugData.medicalFlag, //医保标识
                    // 微信支付标识
                },
            ];
            // console.log(medicals,'000----')
            medicals = encodeURIComponent(JSON.stringify(medicals));
            uni.navigateTo({
                url: `./mallChoose?medicals=${medicals}`,
            });
            this.$refs.popup.close();
        },
    },
};
</script>

<style scoped>
page {
    background-color: #ffffff;
}

.medical_img {
    width: 100%;
    height: 400rpx;
    margin-top: 30rpx;
}

.medical_info {
    padding: 30rpx 0;
    display: flex;
    justify-content: space-between;
}

.price {
    font-size: 40rpx;
    color: #eb534c;
}

.medical_title {
    font-size: 36rpx;
    text-align: center;
    font-weight: bold;
    margin-top: 50rpx;
}

.drugname {
    font-weight: bold;
    font-size: 30rpx;
}

.medical_data {
    margin: 20rpx 0;
    font-size: 30rpx;
    color: #808080;
}

.main_info {
    font-size: 32rpx;
    margin-bottom: 5rpx;
}

.content_info {
    font-size: 28rpx;
}

.content_bg {
    background-color: #ffffff;
    padding: 20rpx 30rpx;
}

/* #ifdef MP-TOUTIAO */
@font-face {
    font-family: uniicons;
    font-weight: normal;
    font-style: normal;
    src: url('~@/static/uni.ttf') format('truetype');
}

/* #endif */
/* #ifndef APP-NVUE */
page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #efeff4;
    min-height: 100%;
    height: auto;
}

view {
    font-size: 14px;
    line-height: inherit;
}

.example {
    padding: 0 15px 15px;
}

.example-info {
    padding: 15px;
    color: #3b4144;
    background: #ffffff;
}

.example-body {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    background-color: #ffffff;
}

/* #endif */
.example {
    padding: 0 15px;
}

.example-info {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    padding: 15px;
    color: #3b4144;
    background-color: #ffffff;
    font-size: 14px;
    line-height: 20px;
}

.example-info-text {
    font-size: 14px;
    line-height: 20px;
    color: #3b4144;
}

.example-body {
    flex-direction: column;
    padding: 15px;
    background-color: #ffffff;
}

.word-btn-white {
    font-size: 18px;
    color: #ffffff;
}

.word-btn {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    height: 48px;
    margin: 15px;
    background-color: #007aff;
}

.word-btn--hover {
    background-color: #4ca2ff;
}

.example-body {
    padding: 0;
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
}

.goods-carts {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    /* #ifdef H5 */
    left: var(--window-left);
    right: var(--window-right);
    /* #endif */
    bottom: 0;
}

.bottom-car {
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
}

.medicalinner_img {
    width: 150rpx;
    height: 140rpx;
    border-radius: 20rpx;
}

.medicalinner_border {
    display: flex;
    margin-top: 10rpx;
}

.medicalprice {
    font-size: 34rpx;
    color: #eb534c;
    margin-top: 30rpx;
}

.medicalName {
    width: 400rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn_appointment {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
    color: #ffffff;
}

/deep/.uni-numbox__minus.data-v-dd94a2a8 {
    border: 0rpx !important;
    background-color: #ffffff;
}

/deep/.uni-numbox__value.data-v-dd94a2a8 {
    border: 0rpx !important;
    background-color: #f2f2f2;
}

/deep/.uni-numbox__plus.data-v-dd94a2a8 {
    border: 0rpx !important;
    background-color: #ffffff;
}

/deep/.uni-numbox--text.data-v-dd94a2a8 {
    font-size: 45rpx;
}

.textContent {
    padding: 30rpx;
    background-color: #ffffff;
    word-break: break-all;
}
</style>
